<template>
  <div class="h100 wrap" >
      <div style="margin-bottom:10px">
            <el-button type="primary" @click="addUser" round>添加用户</el-button>
            <el-checkbox style="margin-left:10px" v-model="checked">显示下级部门人员</el-checkbox>
        </div>  
            <el-table
                v-loading="loadings"
                :data="tableData"
                border
                ref="multipleTable"
                style="flex:1; width:100%"
                height="100%">
                <el-table-column
                type="selection"
                width="45">
                </el-table-column>
                <el-table-column
                prop="true_name"
                label="姓名"
                width="100">
                    <template slot-scope="scope">
                        <span>{{scope.row.true_name}}</span>
<!--                        <el-tooltip class="item" effect="dark" content="点击上调该行" placement="top-start">-->
<!--                            <a href="#"><i style="font-size: 16px" @click="rowUp(0)" class="el-icon-upload2"></i></a>-->
<!--                        </el-tooltip>-->
<!--                        <el-tooltip class="item" effect="dark" content="点击下调该行" placement="top-start">-->
<!--                            <a href="#"><i style="font-size: 16px" @click="rowUp(1)" class="el-icon-download"></i></a>-->
<!--                        </el-tooltip>-->
                    </template>
                </el-table-column>
                <el-table-column
                prop="username"
                label="用户名"
                width="120">
                </el-table-column>
                <el-table-column
                prop="phone"
                width="100"
                label="电话">
                </el-table-column>
                <el-table-column
                prop="name"
                label="角色">
                </el-table-column>
                <el-table-column
                prop="d_name"
                label="部门">
                </el-table-column>
                <el-table-column
                label="操作"
                width="120">
                <template slot-scope="scope">
                    <el-button
                    @click="userEdit(scope.row.id)"
                    type="text"
                    size="small">
                    编辑 
                    </el-button>
                    <el-button
                    type="text"
                    @click="userDel(scope.row.id)"
                    size="small">
                    删除
                    </el-button>
                </template>
                </el-table-column>
            </el-table>
           
            <div class="block">
                <div>
                    <el-button
                    type="warning"
                    @click="selected('del')"
                    size="small">
                    删除
                    </el-button>
                    <el-button
                    @click="selected('edit')"
                    size="small">
                    重置密码
                    </el-button>
                </div>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage1"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="totalRow">
                </el-pagination>
            </div>
  </div>
</template>

<script>
import $ from "jquery";

export default {
    props:{
        // sideList:Array,
        info:Object
    },
    data() {
        return {
            laod:true,
            tableData: [],
            id:this.$route.query.id,
            currentPage1: 1,
            loadings: true,
            totalRow:0,
            checked:false
        }
    },
    mounted:function(){
        this.loadings = true;
        if(this.$route.params.editType == 'search'){
            // console.log(2222222)
            this.getUsersearch((this.$route.params.currentPage1 || 1))
            // this.tableData = this.$route.params.infoData
            // this.totalRow = this.$route.params.totalRow
            // this.loadings = false;

        }else{
            setTimeout(v=>{
                this.load()
            },1000)
            
        }
        
    },
    watch:{ 
        $route(to,from){ 
            // console.log(to); 
            this.id = this.$route.query.id
            this.load()
        },
        checked(){
            // console.log(this.checked)
            this.load()
        }
    },
    methods:{
        rowUp(){
          console.log("up")
        },
        load(val = 1){
            // console.log(this.id)
            this.loadings = true
            if(this.checked){
                
                $.get(this.info.getUserListbydid,{id:this.id,page:val},Response => {
                    if(Response.success){
                        this.tableData = Response.data.data;
                        this.loadings = false;
                        this.totalRow = Response.data.totalRow
                    }else{
                        this.$message.error("出错");
                    }
                })
            }else{
                $.get(this.info.getUserList,{id:this.id,page:val},Response => {
                    if(Response.success){
                        this.tableData = Response.data.data;
                        this.loadings = false;
                        this.totalRow = Response.data.totalRow
                    }else{
                        this.$message.error("出错");
                    }
                })
            }
            
        },
        loading(bool = true) {
                
                const loading = this.$loading({
                lock: true,
                text: '',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, 0.7)'
                });
                if(!bool){
                    loading.close();
                }
            },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.loadings = true
            // console.log(`当前页: ${val}`);
            if(this.$route.params.editType == 'search'){
                // console.log(JSON.stringify(this.$route.params.search))
                this.getUsersearch(val)
                
            }else{
                this.load(val)
            }
            
        },
        getUsersearch(val){
            this.loadings = true
            $.post(this.info.searchUser,{info:JSON.stringify(this.$route.params.search),"pre":val},Response => {
                if(Response.success){
                    this.loadings = false
                    // console.log(Response)
                    // this.options = Response.data.data;
                    // this.loading(false)
                    this.currentPage1 = val
                    this.tableData = Response.data.data
                    this.totalRow = Response.data.totalRow.count
                    this.loadings = false;
                }else{
                    this.$message.error("搜索错误");
                }
                // console.log(Response)
            })
        },
        userEdit(id){
            if(this.$route.params.editType == 'search'){
                this.$router.push({name:"userEdit",query:{ "id": id ,'editType':'edit','search':true},params:{"type":this.info.type,"id": id ,"currentPage1":this.currentPage1,'editType':'edit','searchInfo':this.$route.params.search}})
            }else{
                // this.$router.push({name:"/user/"+this.info.type+"/edit",query:{ "id": id ,'type':'edit'}})
                this.$router.push({name:"userEdit",query:{ "id": id ,'editType':'edit'},params:{ "type":this.info.type,"id": id ,'editType':'edit'}})
            }
            // console.log(id)
        },
        userDel(id){
            // this.$router.push({path:"/user/edit",query:{ "id": id }})
            // console.log(id)
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.load = true
                $.post(this.info.delUser,{id:id},Response => {
                    if(Response.success){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.load = false
                        this.load()
                    }else{
                        this.$message.error("删除失败，请重试");
                    }
                })

                
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
        },
        selected(type){
            // console.log(this.$refs.multipleTable.selection)
            if(this.$refs.multipleTable.selection.length == 0){
                this.$message({
                    type: 'error',
                    message: '请勾选记录'
                }); 
                return false
            }
            
            let data = []
            this.$refs.multipleTable.selection.forEach(element => {
                // console.log(element.id)
                data.push(element.id)
            });
            // console.log(this)
            this.load = true
            if(type == 'del'){
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.post(this.info.CheckoutOperation,{id:JSON.stringify(data),'type':type},Response => {
                        if(Response.success){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.load = false
                            this.load()
                        }else{
                            this.$message.error("失败，请重试");
                        }
                    })
                }).catch(() => {
                    this.load = false
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });          
                });
            }else{
                $.post(this.info.CheckoutOperation,{id:JSON.stringify(data),'type':type},Response => {
                    if(Response.success){
                        this.$message({
                            type: 'success',
                            message: '重置成功!'
                        });
                        this.load = false
                        this.load()
                    }else{
                        this.$message.error("失败，请重试");
                    }
                })
            }
            
            
        },
        addUser(){
            // this.$router.push({path:"/user/"+this.info.type+"/edit",query:{ "id": this.id ,'type':'add'}})
            this.$router.push({name:"userEdit",query:{ "id": this.id ,'editType':'add'},params:{ "type":this.info.type,"id":this.id ,'editType':'add'}})

        }
    }
}
</script>

<style>
.block{
    margin-top:10px;
    display: flex
}
.wrap{
    display: flex;
    flex-direction: column;
}
</style>